<template>
  <div>
    <el-table
      :data="
        $store.state.HomeModule.listDate.slice(
          (currentPage4 - 1) * pageSize4,
          currentPage4 * pageSize4
        )
      "
      stripe
      style="width: 100%"
    >
      <el-table-column prop="id" label="编号" align="center" />
      <el-table-column prop="name" label="名字" align="center" />
      <el-table-column prop="num" label="门牌号" align="center" />
      <el-table-column prop="hometype" label="户型" align="center" />
      <el-table-column prop="type" label="房源类型" align="center" />
      <el-table-column prop="title" label="楼盘名称" align="center" />
      <!--  操作 -->
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <!-- <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          > -->

          <el-popconfirm
            title="是否确认删除?"
            confirm-button-text="是"
            cancel-button-text="否"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="$store.state.HomeModule.listDate.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 模态框展示 -->
    <UD></UD>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
import link from "@/api/Link";
import apiUrl from "@/api/url";
import UD from "@/components/UpdateDialog.vue";
const currentPage4 = ref(1);
const pageSize4 = ref(15);

let store = useStore(); // 接收 useStore

let tableData = reactive({
  listDate: [],
});
// 改变条数
const handleSizeChange = (val: number) => {
  pageSize4.value = val;
};
// 改变页数
const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
};

onMounted(() => {
  store.dispatch("USERUPDATE_LIST");
});

interface User {
  date: string;
  name: string;
  address: string;
}

const handleEdit = (index: number, row: User) => {
  store.commit("SET_DIALOG", row); // 点击修改按钮弹出模态框，并把值传递过去
  // console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  // console.log(index, row);
  store.dispatch("DEL_DATA", row);
};
</script>

<style></style>
